Gatsbyで改行コードをそのまま出す

June 12, 2022


gatsby利用で改行コードを2つ入れないのと表示上改行されなかったのをどうにかしたかったメモ

以下サイト様がとても参考になりました https://blog.abarabakuhatsu.com/use_css_to_break_markdown_with_no_trailing_spaces

style.css に以下を追加

/* <div class="global-wrapper">で囲まれてる */
.global-wrapper p {
	white-space: pre-wrap;
}

.global-wrapper p * {
    white-space: normal;
}

クラス名はF12から覗いた div のclass名です

9FA643F63902DAA4B5D930FD06D3AD71

normal だと通常の html と同じように改行は無視され、pre-wrapなら brタグなしで改行できる。

とのことで、
タグ無しでpre-wrapでそのまま改行をしてもらうようにできました